/* eslint-disable react/jsx-indent-props */

import Taro, { Component } from '@tarojs/taro'
import { View, Image, Input, Picker } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { AtIcon } from 'taro-ui'

import './searchBar.less'
import search from '../../static/img/ic-search.png'
import ic_map from '../../static/img/ic-map.png'
import ic_up from '../../static/img/ic-up.png'

import { setSearchPageBack } from '../../actions/AcSearchFc'

@connect(({ searchFc }) => ({
	searchFc
}), (dispatch) => ({
	setSearchPageBack() {
		dispatch(setSearchPageBack())
	}
}))
class SearchBar extends Component {
	componentWillReceiveProps(nextProps) {
		console.log(this.props, nextProps)
	}
	state = {
		position: '重庆市'
	}
	componentWillMount() {
		console.log(this.props)
	}
	CompSearch() {
		// eslint-disable-next-line taro/this-props-function
		this.props.searchBarOut('val');
	}
	componentWillUnmount() { }

	componentDidShow() { }

	componentDidHide() { }
	onDateChange(e) {
		this.setState({
			position: e.detail.value[0]
		})
	}
	searchBack() {
		// eslint-disable-next-line taro/this-props-function
		this.props.setSearchPageBack && this.props.setSearchPageBack()
	}
	render() {
		let { isshowSearchPage } = this.props.searchFc
		let isBack = isshowSearchPage == 'transform: translateX(100%)' ? false : true
		return (
			<View className='comp-search'>
				<View className='comp-search-position'>
					{
						!isBack ? (<View className='comp-search-position-v'>
							<Picker mode='region' onChange={this.onDateChange.bind(this)}>
								<View className='picker'>
									{this.state.position}
								</View>
							</Picker>

							<Image src={ic_up} className='icon-up'>
							</Image> </View>) :
							<View onClick={this.searchBack.bind(this)} className='back'>
								<AtIcon value='chevron-left' size='20' color='#000'></AtIcon>
							</View>
					}
				</View>
				<View className='comp-search-input'>
					<Image className='icon-search' src={search} mode=''></Image>
					<Input className='input' type='text' Value='' placeholder='请输入小区名/关键词' onFocus={this.CompSearch.bind(this)}></Input>
				</View>
				<View className='comp-search-map'>
					<Image className='icon-map' src={ic_map} mode=''></Image>
					<View className='map-text-outer'>
						<View className='map-text'>地图</View>
						<View className='map-text'>找房</View>
					</View>
				</View>
			</View>
		)
	}
}

export default SearchBar
